import React,{useState} from 'react'
// 1.useNavigate函数
import {Link,Outlet,useNavigate} from 'react-router-dom';

export default function Message() {
  // 2.调用函数返回navigate函数
  const navigate = useNavigate()
  const [messages,setMessage] = useState( [
      {id:'001',title:'消息1',content:'苑少聪'},
      {id:'002',title:'消息2',content:'赵仕祺'},
      {id:'003',title:'消息3',content:'倪向东'},
      {id:'004',title:'消息4',content:'刘同呈'}
    ])

  function showDetail(m){
    //3.使用navigate函数进行路由跳转
    navigate('detail',{
      replace:false,
      state:{
        id:m.id,
        title:m.title,
        content:m.content
      },
    })
  }
  return (
    <div>
      <ul>
        {
          messages.map((m)=> {
            return(
             <div key={m.id}>
              <li>
                <Link to="detail" state={{id:m.id,title:m.title,content:m.content}}>{m.title}</Link>
                <button onClick={()=> {showDetail(m)}}>查看详情</button>
              </li>
             </div>
            )
          })
        }
        <Outlet/>
      </ul>
    </div>
  )
}
